import Vue from "vue";
import Vuex from "vuex";
import createLogger from "vuex/dist/logger";

import state from "./state";
import getters from "./getters";
import mutations from "./mutations";
import actions from "./actions";

import product from "./modules/product";

Vue.use(Vuex);

// console.log(Vuex);
//
// 1. 创建一个共享的vuex仓库对象
//      共享仓库对象的创建方法被记录 Vuex.Store
let store = new Vuex.Store({
  // vuex 的数据存储仓库，用于定义被组件共享的数据变量
  // state: state,
  state,
  // vuex为仓库state数据提供数据包装方法
  //      用于在不修改仓库变量的情况下，为页面提供转换后的数据，类似于组件的计算属性取值
  getters,
  // 定义state仓库中变量修改方法，用于在调试工具中记录修改日志
  mutations,
  // vuex 提供的 actions 主要是为了统一管理中央仓库基于ajax异步初始化数据的操作
  actions,
  // 基于数据关系的不同，分解成多个独立的子仓库
  modules: {
    // 子库注册时，会以定义子库名称合并数据
    product: product,
  },

  // 为vuex扩展功能插件
  plugins: [createLogger()],
});

// 2. 导出创建的仓库对象
export default store;

// 3. 在main.js 中导入仓库对象，并进行注册加载
